import React from "react";
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      //购物车数据
      list: [
        { checked: false, name: "苹果4s", count: 1500, money: 10 },
        { checked: false, name: "香蕉君", count: 500, money: 3 },
        { checked: false, name: "电动棒", count: 99, money: 3 },
        { checked: false, name: "开塞露", count: 5, money: 20 },
      ],
      //总价格
      totals: 0,
      //全选状态
      checkAll: false,
    };
  }
  render() {
    const { checkAll, list, totals } = this.state;
    const { setCheckAll, setList } = this;
    return (
      <div>
        {/* 购物车 */}
        <table border="1" width="90%">
          {/* 车头 */}
          <thead>
            <tr>
              <th>
                全选:{" "}
                <input
                  type="checkbox"
                  name="checkAll"
                  checked={checkAll}
                  onChange={setCheckAll}
                />
              </th>
              <th>名称</th>
              <th>数量</th>
              <th>单价</th>
              <th>金额</th>
              <th>操作</th>
            </tr>
          </thead>
          {/* 主体 */}
          <tbody>
            {list.map((item, index) => {
              return (
                <tr key={index}>
                  <td>
                    <input
                      type="checkbox"
                      name="checked"
                      data-index={index}
                      checked={item.checked}
                      onChange={setList}
                    />
                  </td>
                  <td>{item.name}</td>
                  <td>
                    <button
                      name="count"
                      value={item.count - 1}
                      data-index={index}
                      onClick={setList}
                    >
                      -
                    </button>
                    {item.count}
                    <button
                      name="count"
                      value={item.count + 1}
                      data-index={index}
                      onClick={setList}
                    >
                      +
                    </button>
                  </td>

                  <td>{item.money}</td>
                  <td>{item.count * item.money}</td>
                  <td>
                    <button onClick={setList} name="del" data-index={index}>
                      删除
                    </button>
                  </td>
                </tr>
              );
            })}
          </tbody>
          {/* 底部 */}
          <tfoot>
            <tr>
              <td colSpan="3">
                全选:{" "}
                <input
                  type="checkbox"
                  name="checkAll"
                  checked={checkAll}
                  onChange={setCheckAll}
                />
                <button>删除所选</button>
              </td>
              <td colSpan="3">
                总金额:{totals}
                <button>结算</button>
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
    );
  }

  //给购物车数据用的修改方法
  setList = ({ target }) => {
    console.log(target);
    const list = this.state.list
    const { name, checked, dataset, value } = target;
    const { index } = dataset;
    const _list = [...list];

    if (name === "checked") {
      this.setState(
        () => {
          list[index].checked = checked;
          return {
            list,
          };
        },
        () => {
          this.setState({
            checkAll: list.every((item) => item.checked),
          });
        }
      );
    } else if (name === "del") {
      list.splice(index, 1);
      this.setState({
        list,
      });
    } else {
      _list[index][name] = Number(value);
      this.setState({
        list: _list,
      });
    }
    console.log(name, index, value, checked);
  };

  //专门给全选用的函数
  setCheckAll = () => {
    // const state = !this.state.checkAll;
    this.setState(
      (state) => {
        const states = !this.state.checkAll;
        const list = [...this.state.list].map((item) => {
          item.checked = states;
          return item;
        });
        return {
          list,
          checkAll: states,
        };
      },
      () => {
        //总金额
        totals: this.state.list
          .filter((i) => i.checked)
          .reduce((a, b) => {
            return a + b.count * b.money;
          }, 0);
        console.log(!this.state.list);
      }
    );
  };
}
export default App;
